<template>
    <div>
        <!--    搜索表单-->
        <div>
            <div style="float: left;top:0px">
                <i style="font-size: x-large" class="el-icon-document-checked"></i><span
                    style="font-weight:bold;font-size:x-large">窗口退号</span>
            </div>
            <br>
            <el-divider></el-divider>
            <div>
                <el-input v-model="caseNumber" style="width: 270px;float: left;" placeholder="请输入患者病历号"
                    clearable></el-input>
                <el-input v-model="realName" style="width: 270px; margin-left: 20px;float: left;" placeholder="请输入患者姓名"
                    clearable></el-input>
                <el-button style="margin-left: 25px;float: left" type="primary" @click="SelectByCondition">
                    搜索</el-button>
                <br>
            </div>
            <br> <br>
        </div>
        <el-divider></el-divider>
        <el-table style="width: 100%" :data="RegisterForm">
            <el-table-column label="编号" prop="id">
            </el-table-column>
            <el-table-column label="患者姓名" prop="realName">
            </el-table-column>
            <el-table-column label="患者病历号" prop="caseNumber">
            </el-table-column>
            <el-table-column label="性别" prop="gender">
            </el-table-column>
            <el-table-column label="身份证号" prop="cardNumber">
            </el-table-column>
            <el-table-column label="付款方式" prop="registMethod">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="danger" size="mini" @click="handleEdit(scope.$index, scope.row)">退号</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页组件开始-->
        <el-pagination style="text-align: right" @current-change="handleCurrentChange" :current-page="page"
            :total="totalCount" :page-size="limit" layout="prev, pager, next">
        </el-pagination>
        <!--分页组件结束-->
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data() {
        return {
            RegisterForm: [],
            caseNumber: '',
            realName: '',
            visitState: '1',
            visitType: '退号',//进行退号操作
            page: 1,//页码，默认为1，当页数变化时，进行了一个双向绑定
            limit: 10,//每页显示的条数，默认为10条
            totalCount: 50//默认50条

        }
    },
    mounted() {
        //展示所有已挂号患者信息
        //参数:String visitState
        this.init();

    },
    methods: {
        //每页条数发生变化时触发的事件
        //分页的页码发生变化时触发的事件
        async handleCurrentChange(pageNum) {
            this.page = pageNum
            //重新查询
            this.init()
        },
        async init() {
            //展示所有已挂号患者信息
            //参数:String visitState
            await axios.get("http://127.0.0.1:8088/register/selectByVisitState", { params: { visitState: this.visitState, page: this.page, pageSize: this.limit } }).then((res) => {
                this.RegisterForm = res.data.data.rows
                this.totalCount=res.data.data.total
                console.log(res.data.data)
            })
        },
        // 多条件模糊搜索
        // 参数：String caseNumber,String realName,String visitState
        async SelectByCondition() {
            await axios.get("http://127.0.0.1:8088/register/selectForPatients", { params: { caseNumber: this.caseNumber, realName: this.realName, visitState: this.visitState } }).then((res) => {
                console.log(res.data.data)
                this.RegisterForm = []
                this.RegisterForm = res.data.data
                this.$message({
                    message: '查询成功',
                    type: 'success'
                });
            });
        },
        async handleEdit(index, row) {
            // console.log(index);
            // console.log(row);//整个挂号患者的信息
            console.log(row.caseNumber);//row.想要取得数据
            //拿到进行病历号进行退号
            //参数:String caseNumber,String visitType
            await axios.get("http://127.0.0.1:8088/register/updateVisitState", { params: { caseNumber: row.caseNumber, visitType: this.visitType } }).then((res) => {
                console.log(res.data.data)
                this.$message({
                    message: '退号成功',
                    type: 'success'
                });
            });
            this.init();
        },
    },
}
</script>